{% extends 'mobile/base.html' %}
{% load static %}
{% block mainbody %}
    <!--头部-->
    <header>
        <div class="header">
            <h1>我的订单</h1>
            <a href="{% url 'mobile_member_index' %}" class="return"><i></i></a>
        </div>
    </header>

    <!--内容区-->
    <article class="main-container">

        <!--选项卡-->
        <nav class="memberOrder-nav line">
            <a href="{% url 'mobile_member_orders' %}" {% if sta == 2 %}class="line select"{% endif %}>全部</a>
            <a href="{% url 'mobile_member_orders' %}?status=1" {% if sta == '1' %}class="line select"{% endif %}>排队中</a>
            <a href="{% url 'mobile_member_orders' %}?status=3" {% if sta == '3' %}class="line select"{% endif %}>已完成</a></nav>
        <div class="memberOrder-header"></div>

        <!--列表-->
        {% for order in orderslist %}
            <div class="memberOrder-list line" onclick="location.href='{% url 'mobile_member_detail' %}?pid={{ order.id }}'">
                <p>订单编号：{{ order.id }}<span>（{{ order.statusinfo }}）</span></p>
                <div class="order-product line">
                    <ul>
                        <li>
                            {% for pli in order.plist %}
                                <img src="{% static 'uploads/product' %}/{{ pli.product.cover_pic }}" alt="">
                            {% endfor %}
                        </li>
                    </ul>
                </div>
                <p>
                    <b>总价：<span>￥{{ order.money }}</span></b> &nbsp;&nbsp;
                    <b>下单时间：{{ order.create_at|date:'Y-m-d H:i' }}</b>
                </p>
            </div>
        {% endfor %}

    </article>
{% endblock %}
{% block myjs %}
    {#    <script>#}
    {#        const nav = document.querySelector('.memberOrder-nav')#}
    {#        console.log(123)#}
    {#        nav.addEventListener('click', function (e) {#}
    {#            // 判断点击是a标签才进行#}
    {#            if (e.target.tagName === 'A') {#}
    {#                // console.log('a');#}
    {#                // 移除已有 在选中添加#}
    {#                document.querySelector('.memberOrder-nav .select').classList.remove('select')#}
    {#                e.target.classList.add('select')#}
    {#            }#}
    {#        })#}
    {#    </script>#}
{% endblock %}
